<template>
  <div class="container">
    <el-form :model="this.classgradesData" label-width="120px" class="detailedData">
      <el-form-item :label="table.name" prop="name">
        <el-input v-model="classgradesData.name" disabled/>
      </el-form-item>
      <el-form-item :label="table.introduction" prop="introduction">
        <el-input v-model="classgradesData.introduction" 
            type="textarea"
            rows="3"
            disabled />
      </el-form-item>
      
      <el-form-item :label="table.teachers" prop="teachers"><!-- -----------------------------------------------------------------教师管理表格栏---------------------------------- -->
        <el-table
            :data="this.classgradesData.teachers"
            border
            fit
            stripe
            max-height="150"
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column
            :label="userDataTable.id"
            type="index"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.headPortrait"
            prop="headPortrait"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.name"
            prop="username"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.sex"
            prop="sex"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.phoneNumber"
            prop="phoneNumber"
            align="center"
            width="180px"
            >
            </el-table-column>
        </el-table>     
      </el-form-item>
       <el-form-item :label="table.students" prop="students"><!-- -----------------------------------------------------------------学生管理表格栏---------------------------------- -->
        <el-table
            :data="this.classgradesData.students"
            border
            fit
            max-height="500"
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column
            :label="userDataTable.id"
            type="index"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.headPortrait"
            prop="headPortrait"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.name"
            prop="username"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.sex"
            prop="sex"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.phoneNumber"
            prop="phoneNumber"
            align="center"
            width="180px"
            >
            </el-table-column>
        </el-table>     
      </el-form-item>
    </el-form>

      <!-- *******************************   对话框    *********************************************** -->
      <el-dialog
        v-model="QueryInfoVisible"
        title="基本信息"
        width="60%"
        draggable="true"
      >
        <el-form :model="classDetailedData" label-width="120px">
          <el-form-item label="头像" prop="headPortrait">
            <el-input v-model="headPortrait" disabled="true"/>
          </el-form-item>
          <el-form-item label="班级名称：" prop="name">
            <el-input v-model="name" disabled="true"/>
          </el-form-item>
          <el-form-item label="学生数量：" prop="stuNumber">
            <el-input v-model="stuNumber" disabled="true" />
          </el-form-item>
          <el-form-item label="教师数量：" prop="teaNumber">
            <el-input v-model="teaNumber" disabled="true" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="QueryInfoVisible = false">Cancel</el-button>
            <el-button type="primary" @click="QueryInfoVisible = false"
              >Confirm</el-button
            >
          </span>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
export default {
  name: 'Good',
  setup() {
    const dataMap = reactive({
       classgradesData: '',
       table: {
           name: '班级名称：',
           introduction: "班级介绍:",
           teachers: "教师：",
           students: "学生："
       },
       userDataTable: {
           id:"编号",
           headPortrait: "头像",
           name: "名称",
           sex: "性别",
           phoneNumber: "手机号",
           actions: "行为",
           del: "删除"
           
       }
    })
    onMounted(() => {
              
    })
    
    return {
      ...toRefs(dataMap)
    }
  },
  data() {
  },
  methods: {
    // 获取班级详细信息
    getClassgradeDetailedInfo() {
        var _this = this
        let formData = new FormData()
        formData.append('classgradeId',this.$route.query.classgradeId)
        this.$axios
            .post('/teacher/classgrade/detailedinfo',formData)
            .then( response => {
                let stateCode = response.headers["state"]
                if(stateCode=="200"){
                  this.classgradesData = response.data
                }
                else if(stateCode==null){
                    this.$message.success("请求数据异常！")
                }
                else{
                    this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                }

            })
            .catch(function (error){
                let stateCode = error.response.headers["state"]                            
                if(stateCode!=""){
                    _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                }
                else{
                    _this.$message.error("后端异常")
                }
            })
            .then(function (){
                console.log("测试成功")
            })  
    }
  },
  mounted() {
    this.getClassgradeDetailedInfo()
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 5%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }
  
  .filter-item {
    display: inline-block;
  }

  .table-container {
    height: 95%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .detailedData {
    /* height: 80%;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start; */
    box-sizing: border-box;
  }
</style>